<template>
  <a-modal
    title="预览"
    :width="1200"
    :visible="visible"
    destroyOnClose
    @cancel="handleCancel">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <!--栏目文章详情-->
    <a-card>
      <!-- <div style="text-align: right;">
        <a-icon type="close-circle" style="fontSize:20px" @click="close()" />
      </div> -->
      <div class="title">{{item.title}}</div>
      <div class="author">作者：{{item.author}} <span style="margin-left: 15px" v-if="!!item.publisher">发布：{{item.publisher}}</span>  <span style="margin-left: 15px">{{item.publishDate}}</span>
      </div>
      <a-divider style="margin: 10px 0 10px 0"/>
      <div v-if="item.type=='article' && item.content" v-html="item.content"></div>
      <div v-else-if="item.type=='file' && item.fileUrl"><j-upload v-model="fileList" :buttonVisible="false" :disabled="true"></j-upload></div>
      <div v-else-if="item.type=='url' && item.linkUrl"><a :href="item.linkUrl">{{item.linkUrl}}</a></div>
    </a-card>
  </a-modal>
</template>

<script>
import {getAction} from '@/api/manage'
export default {
  name: "EoaCmsArticlePreviewModal",
  data() {
    return {
      item: {},
      fileList: [],
      visible: false
    }
  },
  methods: {
    findArticle(id) {
      const that = this
      this.item = {}
      this.fileList = []
      getAction("/api/erp/workbench/article/eoaCmsArticle/queryById", { id }).then((res) => {
        if(res.success){
          that.item = res.result
          if(res.result.fileUrl){
            this.fileList = res.result.fileUrl
          }
        }
      })
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    handleCancel () {
      this.close()
    }
  }
  }
</script>

<style lang="less" scoped>
  .title{
    text-align: center;
    font-size: 30px;
    font-weight: 600;
  }
  .author{
    font-size:12px;
    margin-left: 50px;
    text-align: left;
  }
</style>